<template>
	<div class="search-result">
		<table class="table table-striped jambo_table table-bordered">
			<thead>
				<tr>
					<th class="text-center" width="50">ID</th>
					<th class="text-center" width="120">产品名</th>
					<th class="text-center" width="120">价格</th>
					<th class="text-center" width="80">库存</th>
					<th class="text-center" width="140">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-if="products == undefined || products.length == 0"><td colspan=5  class="text-center">无数据</td></tr>
				<tr v-for="item in products">
					<td class="text-center">{{item.id}}</td>
					<td class="text-center">{{item.title}}</td>
					<td class="text-center">{{item.price}}</td>
					<td class="text-center">{{item.inventory}}</td>
					<td class="text-center">
						<button :display="!item.inventory" type="button" class="btn btn-primary fz-12" @click="addToCart(item)">加入购物车</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>
<script>
	import { mapGetters,mapActions } from 'vuex'
	export default {
		computed:mapGetters({
			products:'getAllProducts'
		}),
		methods: mapActions(['addToCart']),
		created(){
			this.$store.dispatch("getAllProducts")
		}
	}
</script>